<template>
    <div v-loading="pager.loading" class="flex flex-col h-full">
        <el-scrollbar>
            <div class="grid gap-x-4 grid-cols-3 3xl:grid-cols-4 6xl:grid-cols-5">
                <div
                    v-for="(item, index) in (pager.lists as SquareRobotResponse[])"
                    :key="index"
                    class="agent-item"
                    @click="handleUse(item.code)"
                >
                    <div class="flex gap-4">
                        <photos width="64px" height="64px" radius="6px" :src="item.logo" />
                        <div class="grid gap-2 mb-6">
                            <h2 class="text-2xl font-semibold line-clamp-1">{{ item.name }}</h2>
                            <div v-if="configs.is_user" class="flex items-center">
                                <ElAvatar :size="16" :src="item?.user?.avatar" />
                                <span class="ml-1.5 text-xs text-tx-placeholder">
                                    {{ item.user?.nickname }}
                                </span>
                            </div>
                            <div class="text-sm text-tx-secondary line-clamp-3 min-h-[60px]">{{ item.intro }}</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 py-3 border-t border-br-lighter">
                        <span class="flex items-center gap-1">
                            <icon name="el-icon-ChatDotRound" :size="14" color="var(--el-text-color-placeholder)" />
                            <em class="text-xs text-tx-placeholder">{{ item.usage_num }}</em>
                        </span>
                        <span class="flex items-center gap-1">
                            <icon name="el-icon-Star" :size="14" color="var(--el-text-color-placeholder)" />
                            <em class="text-xs text-tx-placeholder">{{ item.collect_num }}</em>
                        </span>
                    </div>
                </div>
            </div>
            <div v-if="pager.lists.length <= 0">
                <el-empty description="空空如也~" />
            </div>
        </el-scrollbar>

        <div v-if="pager.lists.length > 0" class="flex justify-center my-4">
            <paging
                v-model="pager"
                layout="prev, pager, next"
                @change="queryLists"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { watchDebounced } from '@vueuse/core'
import squareApi from '~/api/square'
import chatRoomingApi from '~/api/agent/chat/rooming'

const props = withDefaults(
    defineProps<{
        cateId?: number;
        keyword?: string;
        configs?: SquareSettingResponse;
    }>(),
    {
        cateId: 0,
        keyword: '',
        configs: {} as SquareSettingResponse | any
    }
)

// 路由对象
const router = useRouter()

// 查询参数
const queryParams = reactive({
    cate: props.cateId,
    keyword: props.keyword
})

// 分页查询
const { pager, queryLists, resetPaging } = usePaging({
    fetchFun: squareApi.robot,
    params: queryParams
})

/**
 * 处理使用
 *
 * @param {string} bot
 * @author zero
 */
const handleUse = async (bot: string) => {
    await chatRoomingApi.create(bot)
    await router.push('/chats')
}

watch(
    () => props.cateId,
    async () => {
        queryParams.cate = props.cateId
        queryParams.keyword = props.keyword
        await queryLists()
    },
    { immediate: true }
)

watchDebounced(
    () => props.keyword,
    async (value) => {
        queryParams.keyword = value
        await resetPaging()
    },
    {
        debounce: 500
    }
)
</script>

<style scoped lang="scss">
.agent-item {
    position: relative;
    width: 100%;
    padding: 20px 20px 0;
    margin-bottom: 16px;
    overflow: hidden;
    cursor: pointer;
    background: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    &:hover {
        box-shadow: 0 6px 8px 0 rgb(28 31 35 / 12%);
    }
}
</style>
